<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<div id="parent"></div>

<script>
var keyframeValueMap = {
  translate: '10px 10px 10px',
  scale: '1 2 3',
  rotate: '45deg',
  transform: 'translate(10px, 20px)',
  opacity: '1'
};

/* Test that animation on compositableProperty on compositor is cancelled when 
   cancelProperty is animated on the element */
function assertAnimationComposited(compositableProperty, cancelProperty, isStillComposited) {
  var element = document.createElement('div');
  // The element must have some painted content in order to be
  // composited when animated in SPv2.
  element.innerText = 'x';
  document.getElementById('parent').appendChild(element);

  var keyframe = {};
  keyframe[compositableProperty] = keyframeValueMap[compositableProperty];

  var animation = element.animate([keyframe, keyframe], {
    duration: 4000,
    iterations: Infinity
  });

  var description = "Compositor Animation on " + compositableProperty + (isStillComposited ? " is not " : " is ") + "cancelled by " + cancelProperty;
  var asyncHandle = async_test(description);
  requestAnimationFrame(function() {
    requestAnimationFrame(function() {

      asyncHandle.step(function() {
        assert_true(internals.isCompositedAnimation(animation), compositableProperty + " animation should be composited");
      });

      var keyframe2 = {};
      keyframe2[cancelProperty] = keyframeValueMap[cancelProperty];
      animation = element.animate([keyframe2, keyframe2], {
        duration: 4000,
        iterations: Infinity
      });

      requestAnimationFrame(function() {
        requestAnimationFrame(function() {

          asyncHandle.step(function() {
            assert_equals(internals.isCompositedAnimation(animation), isStillComposited, description)
          });

          animation.cancel();
          asyncHandle.done();
        });
      });
    });
  });
}

assertAnimationComposited('transform', 'transform', false);

assertAnimationComposited('transform', 'translate', false);
assertAnimationComposited('transform', 'rotate', false);
assertAnimationComposited('transform', 'scale', false);

assertAnimationComposited('translate', 'transform', false);
assertAnimationComposited('translate', 'rotate', false);
assertAnimationComposited('translate', 'scale', false);
assertAnimationComposited('translate', 'translate', false);

assertAnimationComposited('rotate', 'transform', false);
assertAnimationComposited('rotate', 'rotate', false);
assertAnimationComposited('rotate', 'scale', false);
assertAnimationComposited('rotate', 'translate', false);

assertAnimationComposited('scale', 'transform', false);
assertAnimationComposited('scale', 'rotate', false);
assertAnimationComposited('scale', 'scale', false);
assertAnimationComposited('scale', 'translate', false);

assertAnimationComposited('opacity', 'transform', true);
assertAnimationComposited('opacity', 'translate', true);
assertAnimationComposited('opacity', 'rotate', true);
assertAnimationComposited('opacity', 'scale', true);
</script>
